<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 600px;
            height: 400px;
            border: 2px solid pink;
            /* 导入图片+图片大小 */
            background-size: 300px 200px;
            background-image: url(../1.jpg);

            /* 图片平铺 
            ●  background-repeat: 背景平铺方式。默认xy轴都平铺满
            ○ repeat： 默认值 
            ○ repeat-x：  x轴平铺满
            ○ repeat-y ： y轴平铺满
            ○ no-repeat： 不会平铺*/
            background-repeat: repeat-x ;
        }
        .box2 {
            width: 600px;
            height: 400px;
            border: 2px solid pink;
            margin-top: 50px;
            /* 导入图片+图片大小 */
            background-size: 300px 200px;
            background-image: url(../1.jpg);
            background-repeat: no-repeat ;

            /* 图片缩放 
            ● background-size: 设置背景图片大小： 
            ○ cover: 背景图宽高完全铺满容器。注意：超出容器部分会被截断
            ○ contain: 背景图的宽或高先碰到容器的边界才会停止缩放。*/
            /* background-size: contain; */
            background-size: cover;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>